<template>
    <div class="remark">
        <Header :isLeft="true" title="订单备注"></Header>
        <!--        订单备注-->
        <div class="view-body">
            <section>
                <textarea placeholder="填写额外对餐厅或骑手小哥备注的信息" maxlength="100" v-model="text">
                </textarea>
                <div class="switch">
                    <span
                            @click=" handleRadioItem(item)"
                            v-for="(item,index) in radioItem"
                            :key="index"
                            class="switch-item item-line"
                            :class="{'selected':item.select}"

                    >
                        {{item.name}}
                    </span>
                </div>
                <div class="switch" v-for="(item,index) in switchItem" :key="index">
                   <span
                           class="switch-item"
                           @click="item.select=!item.select"
                           :class="{'selected':item.select}"

                   >
                         {{item.name}}
                   </span>
                </div>
                <button class="btn-submit" @click="submitClick">确定</button>
            </section>
        </div>
    </div>
</template>

<script>
    import Header from '../../components/Header'
    export default {
        name: "Remark",
        components:{
            Header
        },
        data(){
           return{
               radioItem:[
                   {select:false,name:'不要辣'},
                   {select:false,name:'少点辣'},
                   {select:false,name:'多点辣'},

               ],
               switchItem:[
                   {select:false,name:'不要香菜'},
                   {select:false,name:'不要洋葱'},
                   {select:false,name:'多点醋'},
                   {select:false,name:'多点葱花'},
               ],
               text:''
           }
        },
        methods:{
            handleRadioItem(item){
                console.log(item)
                this.radioItem.forEach(element=>{
                    element.select=false;
                    item.select=true
                })
            },
            submitClick(){
                let selectItems=''
                this.radioItem.forEach(element=>{
                    if(element.select){
                        selectItems += element.name + ",";
                    }
                })
                this.switchItem.forEach(element=>{
                    if(element.select){
                        selectItems += element.name + ",";
                    }
                })
                selectItems +=this.text
                console.log(selectItems)
                //存储
                this.$store.dispatch('setRemarkInfo',{
                    tableware:this.$store.getters.remarkInfo.tableware,
                    remark:selectItems
                })
                this.$router.go(-1)
            }
        }

    }
</script>

<style scoped>
    .remark {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding-top: 45px;
    }

    .view-body {
        width: 100%;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
        font-size: 0.8rem;
        color: #333;
    }
    .view-body section {
        margin-top: 2.133333vw;
        padding: 4.266667vw;
        background-color: #fff;
        margin-bottom: 2.133333vw;
    }
    .view-body section textarea {
        width: 100%;
        height: 29.866667vw;
        margin-bottom: 4.266667vw;
        padding: 4.266667vw;
        border: 1px solid #ccc;
        border-radius: 0.666667vw;
        background-color: #f9f9f9;
        color: #666;
        resize: none;
        box-sizing: border-box;
        outline: none;
    }
    .switch {
        display: inline-block;
        margin: 0 2.666667vw 2.666667vw 0;
        border: 1px solid #ddd;
        overflow: hidden;
        border-radius: 1.066667vw;
    }
    .switch-item {
        display: inline-block;
        padding: 0 2.1vw;
        height: 8vw;
        line-height: 8vw;
        text-align: center;
        color: #666;
    }
    .item-line::after {
        content: " ";
        display: inline-block;
        height: 4vw;
        width: 1px;
        background: #ddd;
        line-height: 8vw;
        vertical-align: middle;
        left: 2.266667vw;
        position: relative;
    }
    .item-line:last-child::after {
        display:none;
    }
    .btn-submit {
        display: block;
        padding: 3.466667vw 0;
        color: #fff;
        background-color: #00e067;
        border-radius: 0.533333vw;
        opacity: 0.98;
        width: 92vw;
        margin: 3.133333vw auto 0;
        font-size: 1rem;
        border: none;
        outline: none;
    }

    /* 选中样式 */
    .switch-item.selected {
        background: #0186ff;
        color: #fff;
        position: relative;
    }
</style>

